<template>
  <div
    ref="previewContent"
    style="width: 100%; background: transparent; display: flex; justify-content: center"
    :style="{ 'align-items': baseData[0].print ? 'flex-start' : 'center' }"
  >
    <div :style="mainStyle" class="pre_view" id="pre_view" style>
      <span :style="printTimeStyle" v-if="baseData[0].showPrintTime">打印时间：{{ baseData[0].printTime }}</span>
      <div class="logo" :style="logoStyle" v-if="baseData[2].logo.selected">
        <img :style="{ width: '100%', height: '100%' }" :src="baseData[2].logo.url" />
      </div>
      <div
        v-if="['针式打印三联', '三等分', 's3'].includes(baseData[1].typeValue)"
        :style="{
          display: 'flex',
          'text-align': 'center',
          'margin-top': this.scale * 10 + 'px',
          'align-items': 'center',
        }"
      >
        <div :style="titleStyle">{{ baseData[2].titleStyle.content }}</div>
        <div :style="subTitleStyle">{{ baseData[2].subTitleStyle.content }}</div>
      </div>
      <div v-else :style="{ 'text-align': 'center', 'margin-top': this.scale * 20 + 'px' }">
        <div :style="titleStyle">{{ baseData[2].titleStyle.content }}</div>
        <div :style="subTitleStyle">{{ baseData[2].subTitleStyle.content }}</div>
      </div>

      <div :style="billHeadStyle">
        <div :style="billHeadLeftStyle">
          <div v-if="baseData[0].type">
            <!-- 进项发票信息 -->
          <div v-if="['发票信息按商品', '发票信息按单据', '发票信息不标记明细'].includes(baseData[0].type)" :style="billHeadRightContentStyle">
            <span
                :style="{ 'margin-right': scale * 20 + 'px', lineHeight: '22px' }"
                v-if="baseData[4].columnData.companyName.selected"
                >{{ baseData[4].columnData.companyName.name + '：' + baseData[4].otherData.companyName }}</span
              >
          </div>
          <div v-else>
            <div>
              <span
                :style="{ 'margin-right': scale * 20 + 'px', lineHeight: '22px' }"
                v-if="baseData[4].columnData.companyName.selected"
                >{{ baseData[4].columnData.companyName.name + '：' + baseData[4].otherData.companyName }}</span
              >
              <span
                :style="{ 'margin-right': scale * 20 + 'px' }"
                v-if="
                  ['销售换货单', '采购换货单'].includes(baseData[0].type) &&
                  baseData[4].columnData.companyUserName.selected
                "
                >{{ baseData[4].columnData.companyUserName.name + '：' + baseData[4].otherData.companyUserName }}</span
              >
              <span v-if="baseData[4].columnData.phone.selected">{{
                baseData[4].columnData.phone.name + '：' + baseData[4].otherData.phone
              }}</span>
            </div>
            <div v-if="baseData[4].columnData.address.selected">
              {{ baseData[4].columnData.address.name + '：' + baseData[4].otherData.address }}
            </div>
          </div>
          </div>
        </div>
        <div :style="billHeadRightStyle">
          <!-- 进项发票信息 -->
          <div v-if="['发票信息按商品', '发票信息按单据', '发票信息不标记明细'].includes(baseData[0].type)" :style="billHeadRightContentStyle">
            <!-- <span style="margin-left: 10px" v-if="baseData[4].columnData.sysUserId_dictText.selected"
              >经手人：{{ baseData[4].otherData.sysUserId_dictText || '' }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.departId_dictText.selected"
              >部门：{{ baseData[4].otherData.departId_dictText }}</span
            > -->
            <span style="margin-left: 10px" v-if="baseData[4].columnData.invoiceTime.selected"
              >开票日期：{{ baseData[4].otherData.invoiceTime }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.invoiceNumber.selected"
              >发票号码：{{ baseData[4].otherData.invoiceNumber }}</span
            >
            <!-- 开票金额 -->
            <span style="margin-left: 10px" v-if="baseData[4].columnData.invoicePrice.selected"
              >开票金额：{{ baseData[4].otherData.invoicePrice }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.invoiceType_dictText.selected"
              >发票类型：{{ baseData[4].otherData.invoiceType_dictText }}</span
            >
            <!-- <span style="margin-left: 10px" v-if="baseData[4].columnData.invoiceWay_dictText.selected"
              >开票方式：{{ baseData[4].otherData.invoiceWay_dictText }}</span
            > -->
            
          </div>
          <!-- 销售出库+退货 -->
          <div v-if="['销售出库单', '销售退货单'].includes(baseData[0].type)" :style="billHeadRightContentStyle">
            <span style="margin-left: 10px" v-if="baseData[4].columnData.orderNumber.selected">{{
              baseData[4].columnData.orderNumber.name + '：' + baseData[4].otherData.orderNumber
            }}</span>
            <span style="margin-left: 10px" v-if="baseData[4].columnData.outTime.selected">{{
              baseData[4].columnData.outTime.name + '：' + baseData[4].otherData.outTime
            }}</span>
            <span style="margin-left: 10px" v-if="baseData[4].columnData.sysUserId_dictText.selected">{{
              baseData[4].columnData.sysUserId_dictText.name + '：' + (baseData[4].otherData.sysUserId_dictText || '')
            }}</span>
            <span style="margin-left: 10px" v-if="baseData[4].columnData.xghOutStorehouseId_dictText.selected">{{
              baseData[4].columnData.xghOutStorehouseId_dictText.name +
              '：' +
              baseData[4].otherData.xghOutStorehouseId_dictText
            }}</span>
          </div>
          <!-- 销售订单 -->
          <div v-if="['销售订单'].includes(baseData[0].type)" :style="billHeadRightContentStyle">
            <span style="margin-left: 10px" v-if="baseData[4].columnData.orderNumber.selected"
              >单据编号：{{ baseData[4].otherData.orderNumber }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.orderTime.selected"
              >订单日期：{{ baseData[4].otherData.orderTime }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.sysUserId_dictText.selected"
              >经手人：{{ baseData[4].otherData.sysUserId_dictText || '' }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.xghOutStorehouseId_dictText.selected"
              >出货仓库：{{
                baseData[4].otherData.xghOutStorehouseId_dictText || baseData[4].otherData.xghStorehouseId_dictText
              }}</span
            >
          </div>
          <!-- 采购入库+退货 -->
          <div v-if="['采购入库单', '采购退货单'].includes(baseData[0].type)" :style="billHeadRightContentStyle">
            <span style="margin-left: 10px" v-if="baseData[4].columnData.orderNumber.selected">{{
              baseData[4].columnData.orderNumber.name + '：' + baseData[4].otherData.orderNumber
            }}</span>
            <span style="margin-left: 10px" v-if="baseData[4].columnData.putTime.selected">{{
              baseData[4].columnData.putTime.name + '：' + baseData[4].otherData.putTime
            }}</span>
            <span style="margin-left: 10px" v-if="baseData[4].columnData.sysUserId_dictText.selected">{{
              baseData[4].columnData.sysUserId_dictText.name + '：' + (baseData[4].otherData.sysUserId_dictText || '')
            }}</span>
            <span style="margin-left: 10px" v-if="baseData[4].columnData.xghStorehouseId_dictText.selected">{{
              baseData[4].columnData.xghStorehouseId_dictText.name +
              '：' +
              baseData[4].otherData.xghStorehouseId_dictText
            }}</span>
          </div>
          <!-- 采购订单 -->
          <div v-if="['采购订单'].includes(baseData[0].type)" :style="billHeadRightContentStyle">
            <span style="margin-left: 10px" v-if="baseData[4].columnData.orderNumber.selected"
              >单据编号：{{ baseData[4].otherData.orderNumber }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.orderTime.selected"
              >订单日期：{{ baseData[4].otherData.orderTime }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.sysUserId_dictText.selected"
              >经手人：{{ baseData[4].otherData.sysUserId_dictText || '' }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.xghStorehouseId_dictText.selected"
              >入货仓库：{{ baseData[4].otherData.xghStorehouseId_dictText }}</span
            >
          </div>
          <!-- 换货单 -->
          <div v-if="['销售换货单', '采购换货单'].includes(baseData[0].type)" :style="billHeadRightContentStyle">
            <span style="margin-left: 10px" v-if="baseData[4].columnData.orderNumber.selected"
              >单据编号：{{ baseData[4].otherData.orderNumber }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.outTime.selected"
              >单据日期：{{ baseData[4].otherData.outTime }}</span
            >
            <span style="margin-left: 10px" v-if="baseData[4].columnData.sysUserId_dictText.selected"
              >经手人：{{ baseData[4].otherData.sysUserId_dictText || '' }}</span
            >
          </div>
        </div>
      </div>
      <!-- 换货单 -->
      <div
        class="bill_body"
        id="bill_body"
        v-if="['销售换货单', '采购换货单'].includes(baseData[0].type)"
        :style="billBodyStyle"
      >
        <div class="bill_mask_view_script"></div>
        <div>
          <el-table
            class="el-table-print"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :data="getTableData()"
            :span-method="arraySpanMethod"
          >
            <template v-for="(item, index) in baseData[5].columnData">
              <el-table-column
                v-if="item.morenState"
                :label="item.morenName"
                :prop="item.props"
                :width="item.width * scale"
              >
                <template slot-scope="scope">
                  <div
                    :class="[
                      ['xh', 'idx', 'unit', 'changeType'].includes(item.props)
                        ? 'flex_center'
                        : ['合计', '差额'].includes(scope.row.changeType) &&
                          ['allPriceShow', 'numberShow'].includes(item.props)
                        ? 'flex_right'
                        : '',
                    ]"
                    class="temp"
                  >
                    {{ scope.row[item.props] }}
                  </div>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
      <!-- 发票不标记明细 -->
      <div
        class="bill_body"
        id="bill_body"
        v-else-if="['发票信息不标记明细'].includes(baseData[0].type)"
        :style="billBodyStyle"
      >
        <div class="bill_mask_view_script"></div>
        <div>
          <!-- <el-table
            class="el-table-print"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :data="getTableData()"
            :span-method="arraySpanMethod"
          >
            <template v-for="(item, index) in baseData[5].columnData">
              <el-table-column
                v-if="item.morenState"
                :label="item.morenName"
                :prop="item.props"
                :width="item.width * scale"
              >
                <template slot-scope="scope">
                  <div
                    :class="[
                      ['xh', 'idx', 'unit', 'changeType'].includes(item.props)
                        ? 'flex_center'
                        : ['合计', '差额'].includes(scope.row.changeType) &&
                          ['allPriceShow', 'numberShow'].includes(item.props)
                        ? 'flex_right'
                        : '',
                    ]"
                    class="temp"
                  >
                    {{ scope.row[item.props] }}
                  </div>
                </template>
              </el-table-column>
            </template>
          </el-table> -->
        </div>
      </div>
      <!-- 发票按单据 按商品 -->
      <!-- <div v-else-if="['发票信息按单据', '发票信息按商品'].includes(baseData[0].type)" class="bill_body" id="bill_body" :style="billBodyStyle">
        <div class="bill_mask_view_script"></div>
        <el-table
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :data="getTableDataBySingle()"
          class="el-table-print"
          :span-method="arraySpanMethodBySingle"
        >
          <template v-for="(item, index) in baseData[5].columnData">
            <el-table-column
              v-if="item.morenState"
              :label="item.morenName"
              :prop="item.props"
              :width="Math.ceil(item.width * scale)"
            >
              <template slot-scope="scope">
                <div
                  :class="[
                    ['xh', 'idx', 'unit'].includes(item.props)
                      ? 'flex_center'
                      : scope.row.idx == '合计' && ['Price', 'number'].includes(item.props)
                      ? 'flex_right'
                      : '',
                  ]"
                  style="background-color: transparent"
                  class="temp"
                >
                  {{ scope.row[item.props] }}
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div> -->
      <!-- 非换货单 -->
      <div class="bill_body" id="bill_body" v-else :style="billBodyStyle">
        <div class="bill_mask_view_script"></div>
        <el-table
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :data="getTableDataBySingle()"
          class="el-table-print"
          :span-method="arraySpanMethodBySingle"
        >
          <template v-for="(item, index) in baseData[5].columnData">
            <el-table-column
              v-if="item.morenState"
              :label="item.morenName"
              :prop="item.props"
              :width="Math.ceil(item.width * scale)"
            >
              <template slot-scope="scope">
                <div
                  :class="[
                    ['xh', 'idx', 'unit'].includes(item.props)
                      ? 'flex_center'
                      : scope.row.idx == '合计' && ['allPrice', 'number'].includes(item.props)
                      ? 'flex_right'
                      : '',
                  ]"
                  style="background-color: transparent"
                  class="temp"
                >
                  {{ scope.row[item.props] }}
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <!-- v-if="!['发票信息按商品', '发票信息按单据', '发票信息不标记明细'].includes(baseData[0].type)" -->
      <div v-if="['发票信息按商品', '发票信息按单据', '发票信息不标记明细'].includes(baseData[0].type)" class="bill_foot" :style="billFootStyle">
        <div :style="billFootLeftStyle">
          <span v-if="getDomShow(6, 'price')">不含税金额：{{ baseData[6].otherData.price }}</span>
          <span v-if="getDomShow(6, 'taxAmount')">税额：{{ baseData[6].otherData.taxAmount }}</span>
          <span v-if="getDomShow(6, 'priceTaxTotal')">价税合计：{{ baseData[6].otherData.priceTaxTotal }}</span>
          <!-- <span v-if="getDomShow(6, 'collectionPrice')">本次收款：{{ baseData[6].otherData.collectionPrice }}</span>
          <span v-if="getDomShow(6, 'totalDebt')">累计欠款：{{ baseData[6].otherData.totalDebt }}</span>
          <span v-if="getDomShow(6, 'remark')">备注：{{ baseData[6].otherData.remark }}</span>
          <div v-if="getDomShow(6, 'appendRemark')" v-html="getHtmlDomValue()"></div> -->
        </div>
        <!-- <div :style="billFootRightStyle">
          <div>
            <span v-if="getDomShow(6, 'verifyId_dictText')" style="margin-right: 10px"
              >审核人：{{ baseData[6].otherData.verifyId_dictText }}</span
            >
            <span v-if="getDomShow(6, 'createName')" style="margin-right: 10px"
              >制单人：{{ baseData[6].otherData.createName || baseData[6].otherData.createUserName }}</span
            >
            <span v-if="getDomShow(6, 'createOrderDate')">制单日期：{{ baseData[6].otherData.createOrderDate }}</span>
          </div>
          <div :style="bottomStyle">
            <div v-for="item in baseData[7].qrList" :key="item.id" style="display: flex; align-items: center">
              <template v-if="item.selected">
                <span :style="{ 'font-size': scale * 10 + 'px', margin: '0 5px' }">{{ item.title }}</span>
                <div :style="qrImgStyle">
                  <img :style="{ width: '100%', height: '100%' }" :src="item.url" />
                </div>
              </template>
            </div>
          </div>
        </div> -->
      </div>
      <div v-else class="bill_foot" :style="billFootStyle">
        <div :style="billFootLeftStyle">
          <span v-if="getDomShow(6, 'footAddress')">地址：{{ baseData[6].otherData.footAddress }}</span>
          <span v-if="getDomShow(6, 'footPhone')">电话：{{ baseData[6].otherData.footPhone }}</span>
          <span v-if="getDomShow(6, 'beforeDebt')">此前欠款：{{ baseData[6].otherData.beforeDebt }}</span>
          <span v-if="getDomShow(6, 'collectionPrice')">本次收款：{{ baseData[6].otherData.collectionPrice }}</span>
          <span v-if="getDomShow(6, 'totalDebt')">累计欠款：{{ baseData[6].otherData.totalDebt }}</span>
          <span v-if="getDomShow(6, 'remark')">备注：{{ baseData[6].otherData.remark }}</span>
          <span v-if="getDomShow(6, 'postscript')">附记：{{ baseData[6].otherData.postscript || '-' }}</span>
          <div v-if="getDomShow(6, 'appendRemark')" v-html="getHtmlDomValue()"></div>
        </div>
        <div :style="billFootRightStyle">
          <div>
            <span v-if="getDomShow(6, 'verifyId_dictText')" style="margin-right: 10px"
              >审核人：{{ baseData[6].otherData.verifyId_dictText }}</span
            >
            <span v-if="getDomShow(6, 'createName')" style="margin-right: 10px"
              >制单人：{{ baseData[6].otherData.createName || baseData[6].otherData.createUserName }}</span
            >
            <span v-if="getDomShow(6, 'createOrderDate')">制单日期：{{ baseData[6].otherData.createOrderDate }}</span>
          </div>
          <div :style="bottomStyle">
            <div v-for="item in baseData[7].qrList" :key="item.id" style="display: flex; align-items: center">
              <template v-if="item.selected">
                <span :style="{ 'font-size': scale * 10 + 'px', margin: '0 5px' }">{{ item.title }}</span>
                <div :style="qrImgStyle">
                  <img :style="{ width: '100%', height: '100%' }" :src="item.url" />
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      
      <span :style="technicalSupportStyle">象过河软件技术支持</span>
    </div>
  </div>
</template>
<script>
import { includes } from 'xe-utils/methods'
import { formatMoney, formatNumber, accAdd, delcommafy } from '../../utils'

export default {
  props: {
    baseData: Array,
    tipsData: Object,
    isSet: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      text: '',
      isUpdate: false,
      tableData: [],
      codeList: [],
      finishStatus: false,
      inputFocus: false,
      domReady: false,
      scale: 1, //比例
      printTime: '',
    }
  },
  created() {},
  mounted() {
    let that = this
    this.$nextTick(() => {
      that.domReady = true
    })
  },
  updated() {},
  activated() {},
  computed: {
    mainStyle() {
      if (this.domReady) {
        let padding = this.baseData[1].padding
        let item = this.baseData[1]

        let size = this.getPageSize()
        let w = size.w
        let h = size.h

        let availableWidth =
          this.$refs.previewContent && this.$refs.previewContent.offsetWidth ? this.$refs.previewContent.offsetWidth : w
        let width = Math.min(w, availableWidth)
        this.scale = width / w

        let style = {
          width: width + 'px',
          'padding-top': this.scale * padding.top + 'px',
          'padding-bottom': this.scale * padding.bottom + 'px',
          'padding-left': this.scale * padding.left + 'px',
          'padding-right': this.scale * padding.right + 'px',
          backgroundColor: '#fff',
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          // boxShadow: 'rgb(153,153,153) 0px 0px 10px',
          'font-family': 'Microsoft YaHei !important',
          color: '#000 !important',
        }
        return style
      }
      return ''
    },
    // logo
    logoStyle() {
      let is3 = ['针式打印三联', '三等分', 's3'].includes(this.baseData[1].typeValue)
      return {
        position: 'absolute',
        top: is3 ? this.scale * 15 + 'px' : this.scale * 35 + 'px',
        left: is3 ? this.scale * 35 + 'px' : this.scale * 67 + 'px',
        'z-index': 1,
        width: is3 ? this.scale * 90 + 'px' : this.scale * 120 + 'px',
        height: is3 ? this.scale * 30 + 'px' : this.scale * 40 + 'px',
        'font-family': 'Microsoft YaHei !important',
        color: '#000 !important',
      }
    },
    // 主标题
    titleStyle() {
      let item = this.baseData[2].titleStyle
      let size = item.size.substr(0, item.size.length - 1)
      return {
        'font-size': this.scale * size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    // 副标题
    subTitleStyle() {
      let item = this.baseData[2].subTitleStyle
      let size = item.size.substr(0, item.size.length - 1)
      return {
        'font-size': this.scale * size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadStyle() {
      return {
        fontSize: this.scale * 12 + 'px',
        marign: '10px 0 1px',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        position: 'relative',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadLeftStyle() {
      return {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'flex-end',
        color: '#666666',
        lineHeight: this.scale * 16 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadRightStyle() {
      return {
        position: 'absolute',
        right: '0',
        bottom: '0',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadRightContentStyle() {
      let is3 = ['针式打印三联', '三等分', 's3'].includes(this.baseData[1].typeValue)
      if (is3) {
        return {
          display: 'flex',
          flexDirection: 'column-reverse',
          height: this.scale * 40 + 'px',
          flexWrap: 'wrap-reverse',
          justifyContent: 'flex-start',
          color: '#000000',
          'font-family': 'Microsoft YaHei !important',
        }
      } else {
        return {
          display: 'flex',
          whiteSpace: 'nowrap',
          flexDirection: 'column-reverse',
          alignItems: 'flex-start',
          color: '#000000',
          'font-family': 'Microsoft YaHei !important',
        }
      }
    },
    billBodyStyle() {
      return {
        width: '100%',
        overflow: 'hidden',
        overflowX: 'clip',
        margin: '5px 0',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        padding: '5px 8px',
      }
    },

    headerCellStyle() {
      let sizeStr = this.baseData[2].tableHead.size
      let size = sizeStr.substr(0, sizeStr.length - 1)
      let h = this.scale * this.baseData[3].headHeight
      let height = h //Math.max(20, h)
      return {
        color: '#666666',
        textAlign: 'center',
        height: height + 'px',
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        backgroundColor: '#ededed',
        fontWeight: this.baseData[2].tableHead.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        minHeight: '20px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        padding: '1px',
        background: 'transparent',
        borderTop: '1px solid black',
      }
    },
    cellStyle() {
      let h = this.scale * this.baseData[3].rowHeight
      let height = Math.max(20, h)
      let sizeStr = this.baseData[2].tableBody.size
      let size = sizeStr.substr(0, sizeStr.length - 1)
      return {
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        textAlign: 'left',
        height: height + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        minHeight: '20px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        background: 'transparent',
        padding: '1px',
      }
    },
    billFootStyle() {
      return {
        fontSize: this.scale * 12 + 'px',
        marign: '10px 0 5px',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootLeftStyle() {
      return {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flexDirection: 'column',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootRightStyle() {
      return {
        // display: 'flex',
        whiteSpace: 'nowrap',
        textAlign: 'right',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    qrImgStyle() {
      return {
        width: this.scale * 60 + 'px',
        height: this.scale * 60 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    // 技术支持
    technicalSupportStyle() {
      return {
        color: '#B8BABE',
        'font-size': this.scale * 10 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        alignSelf: 'flex-start',
      }
    },
    printTimeStyle() {
      let padding = this.baseData[1].padding
      return {
        color: '#666666',
        'font-size': this.scale * 8 + 'px',
        position: 'absolute',
        top: this.scale * (padding.top + 30) + 'px',
        right: this.scale * 22 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    bottomStyle() {
      let padding = this.baseData[1].padding
      return {
        marginTop: this.scale * 10 + 'px',
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
  },
  methods: {
    getPageSize() {
      let max = 1123
      let min = 794
      let value = this.baseData[1].typeValue
      switch (value) {
        case 's1':
          return {
            w: min,
            h: max - 20,
          }
          break
        case 's2':
        case '二等分':
        case '针式打印二联':
        case 'A5':
          return {
            w: min,
            h: max / 2 - 20,
          }
          break
        case 's3':
          return {
            w: min,
            h: max / 3 - 20,
          }
          break
        case 'h1':
        case 'A4':
          return {
            w: max,
            h: min - 20,
          }
          break
        case 'h2':
          return {
            w: max,
            h: min / 2 - 20,
          }
          break
        default:
          break
      }
    },
    cloneData(obj) {
      return JSON.parse(JSON.stringify(obj))
    },
    getTableData() {
      let result = []
      let type = this.baseData[0].type || ''
      let td1 = this.baseData[5].tableData
      let td2 = this.baseData[5].tableData1
      let list1 = type == '采购换货单' ? this.cloneData(td1) : this.cloneData(td2)
      let list2 = type == '采购换货单' ? this.cloneData(td2) : this.cloneData(td1)
      let cd = this.baseData[5].columnData.filter((item) => {
        return item.morenState
      })

      //上边换入/换出数据
      result = result.concat(
        list1.map((item) => {
          item.isGive = item.isGive ? '是' : '否'
          return item
        })
      )
      //上边合计
      let upnumber = 0.0
      let upallPrice = 0.0
      console.log(list1);
      
      for (let i = 0; i < list1.length; i++) {
        const element = list1[i]
        upallPrice = accAdd(upallPrice, delcommafy(element['allPrice']))
        upnumber += Number(element['number'])
      }
      let upItem = {
        changeType: '合计',
        number: formatNumber(upnumber),
        numberShow: formatNumber(upnumber),
        allPrice: formatMoney(upallPrice),
        allPriceShow: formatMoney(upallPrice),
      }
      if (cd.length > 1) {
        let props = cd[1].props
        if (!['allPriceShow', 'numberShow', 'allPrice', 'number'].includes(props)) {
          upItem[props] = this.toChinese(upallPrice)
        }
      }
      result.push(upItem)

      //下边换入/换出数据
      result = result.concat(
        list2.map((item) => {
          item.isGive = item.isGive ? '是' : '否'
          return item
        })
      )

      //下边合计
      let downnumber = 0.0
      let downallPrice = 0.0
      for (let i = 0; i < list2.length; i++) {
        const element = list2[i]
        downallPrice = accAdd(downallPrice, delcommafy(element['allPrice']))
        downnumber += Number(element['number'])
      }
      let downItem = {
        changeType: '合计',
        number: formatNumber(downnumber),
        numberShow: formatNumber(downnumber),
        allPrice: formatMoney(downallPrice),
        allPriceShow: formatMoney(downallPrice),
      }
      if (cd.length > 1) {
        let props = cd[1].props
        if (!['allPriceShow', 'numberShow', 'allPrice', 'number'].includes(props)) {
          downItem[props] = this.toChinese(downallPrice)
        }
      }
      result.push(downItem)

      //差额
      let price = this.baseData[6].otherData.receivablePrice || '0.00'
      console.log('差额，', price)
      let cItem = {
        changeType: '差额',
        allPrice: formatMoney(price),
        allPriceShow: formatMoney(price),
      }
      if (cd.length > 1) {
        let props = cd[1].props
        cItem[props] = this.toChinese(Number(price))
      }
      result.push(cItem)
      return result
    },
    getTableDataBySingle() {
      let list = this.cloneData(this.baseData[5].tableData)
      let result = []
      let cd = this.baseData[5].columnData.filter((item) => {
        return item.morenState
      })
      //商品数据
      result = result.concat(
        list.map((item) => {
          item.isGive = item.isGive ? '是' : '否'
          return item
        })
      )
      //合计
      let number = 0.0
      let allPrice = 0.0      
      for (let i = 0; i < list.length; i++) {
        const element = list[i]
        number += Number(element['number'])
        // 本次开票金额合计
        if(element['nowInvoiceAmount']) {
          allPrice = accAdd(allPrice, delcommafy(element['nowInvoiceAmount']))
        } else {
          //其他单据
        if (element['allPrice'] == '******') {
          allPrice = '******'
        } else {
          allPrice = accAdd(allPrice, delcommafy(element['allPrice']))
        }
      }
      }
      let item = {
        idx: '合计',
        number: formatNumber(number),
        numberShow: formatNumber(number),
        allPrice: allPrice == '******' ? '******' : formatMoney(allPrice),
        allPriceShow: allPrice == '******' ? '******' : formatMoney(allPrice),
      }
      if (cd.length > 1) {
        let props = cd[1].props
        if (!['allPriceShow', 'numberShow', 'allPrice', 'number'].includes(props)) {
          item[props] = allPrice == '******' ? '******' : this.toChinese(allPrice)
        }
      }
      result.push(item)
      return result
    },
    getHtmlDomValue() {
      let item = this.baseData[6]
      let appendRemark = (item.otherData.appendRemark || '').replace(/\n/g, '<br />')
      return appendRemark
    },
    getDomShow(index, key) {
      let item = this.baseData[index]
      if (key == 'appendRemark') {
        let appendRemark = item.otherData.appendRemark || ''
        return appendRemark.length > 0
      }
      if (item && item.columnData && item.columnData.hasOwnProperty(key)) {
        return item.columnData[key].selected
      } else {
        return false
      }
    },
    toChinese(num) {
      // console.log(num);
      //金额列不显示时也不显示大写合计
      let cList = this.baseData[5].columnData
      for (let index = 0; index < cList.length; index++) {
        const element = cList[index]
        if (['allPrice', 'allPriceShow'].includes(element.props)) {
          if (!element.morenState) {
            return ''
          }
        }
      }
      let isMinus = num < 0
      let Num = num.toString()
      for (let i = Num.length - 1; i >= 0; i--) {
        Num = Num.replace(',', '') //替换tomoney()中的“,”
        Num = Num.replace(' ', '') //替换tomoney()中的空格
        Num = Num.replace('-', '') //替换tomoney()中的负号
      }
      Num = Num.replace('￥', '') //替换掉可能出现的￥字符
      if (isNaN(Num)) {
        //验证输入的字符是否为数字
        return
      }
      //---字符处理完毕，开始转换，转换采用前后两部分分别转换---//
      let part = String(Num).split('.')
      let newchar = ''
      //小数点前进行转化
      for (let i = part[0].length - 1; i >= 0; i--) {
        if (part[0].length > 11) {
          return ''
        } //若数量超过百亿单位，提示
        let tmpnewchar = ''
        let perchar = part[0].charAt(i)
        switch (perchar) {
          case '0':
            tmpnewchar = '零' + tmpnewchar
            break
          case '1':
            tmpnewchar = '壹' + tmpnewchar
            break
          case '2':
            tmpnewchar = '贰' + tmpnewchar
            break
          case '3':
            tmpnewchar = '叁' + tmpnewchar
            break
          case '4':
            tmpnewchar = '肆' + tmpnewchar
            break
          case '5':
            tmpnewchar = '伍' + tmpnewchar
            break
          case '6':
            tmpnewchar = '陆' + tmpnewchar
            break
          case '7':
            tmpnewchar = '柒' + tmpnewchar
            break
          case '8':
            tmpnewchar = '捌' + tmpnewchar
            break
          case '9':
            tmpnewchar = '玖' + tmpnewchar
            break
        }

        switch (part[0].length - i - 1) {
          case 0:
            tmpnewchar = tmpnewchar + '元'
            break
          case 1:
            if (perchar != 0) tmpnewchar = tmpnewchar + '拾'
            break
          case 2:
            if (perchar != 0) tmpnewchar = tmpnewchar + '佰'
            break
          case 3:
            if (perchar != 0) tmpnewchar = tmpnewchar + '仟'
            break
          case 4:
            tmpnewchar = tmpnewchar + '万'
            break
          case 5:
            if (perchar != 0) tmpnewchar = tmpnewchar + '拾'
            break
          case 6:
            if (perchar != 0) tmpnewchar = tmpnewchar + '佰'
            break
          case 7:
            if (perchar != 0) tmpnewchar = tmpnewchar + '仟'
            break
          case 8:
            tmpnewchar = tmpnewchar + '亿'
            break
          case 9:
            tmpnewchar = tmpnewchar + '拾'
            break
        }
        newchar = tmpnewchar + newchar
      }
      //小数点之后进行转化
      if (Num.indexOf('.') != -1) {
        if (part[1].length > 2) {
          part[1] = part[1].substr(0, 2)
        }
        for (let i = 0; i < part[1].length; i++) {
          let tmpnewchar = ''
          let perchar = part[1].charAt(i)
          switch (perchar) {
            case '0':
              tmpnewchar = '零' + tmpnewchar
              break
            case '1':
              tmpnewchar = '壹' + tmpnewchar
              break
            case '2':
              tmpnewchar = '贰' + tmpnewchar
              break
            case '3':
              tmpnewchar = '叁' + tmpnewchar
              break
            case '4':
              tmpnewchar = '肆' + tmpnewchar
              break
            case '5':
              tmpnewchar = '伍' + tmpnewchar
              break
            case '6':
              tmpnewchar = '陆' + tmpnewchar
              break
            case '7':
              tmpnewchar = '柒' + tmpnewchar
              break
            case '8':
              tmpnewchar = '捌' + tmpnewchar
              break
            case '9':
              tmpnewchar = '玖' + tmpnewchar
              break
          }
          if (i == 0) tmpnewchar = tmpnewchar + '角'
          if (i == 1) tmpnewchar = tmpnewchar + '分'
          newchar = newchar + tmpnewchar
        }
      }
      //替换所有无用汉字
      while (newchar.search('零零') != -1) newchar = newchar.replace('零零', '零')
      newchar = newchar.replace('零亿', '亿')
      newchar = newchar.replace('亿万', '亿')
      newchar = newchar.replace('零万', '万')
      if (newchar != '零元') {
        if (newchar.substring(0, 2) == '零元') newchar = newchar.replace('零元', '')
        else newchar = newchar.replace('零元', '元')
      }
      newchar = newchar.replace('零角', '')
      newchar = newchar.replace('零分', '')

      if (newchar.charAt(newchar.length - 1) == '元' || newchar.charAt(newchar.length - 1) == '角') {
        newchar = newchar + '整'
      }
      if (isMinus) {
        newchar = '负' + newchar
      }
      return newchar
    },
    arraySpanMethodBySingle({ row, column, rowIndex, columnIndex }) {
      let idx = (row && row.idx) || ''
      if (idx == '合计') {
        let cd = this.baseData[5].columnData.filter((item) => {
          return item.morenState
        })
        let max = 0
        for (let index = 0; index < cd.length; index++) {
          const element = cd[index]
          if (['allPriceShow', 'numberShow', 'allPrice', 'number'].includes(element.props)) {
            max = index
            break
          }
        }
        let length = this.baseData[5].tableData.length
        if (rowIndex > length - 1 && max > 1) {
          if (columnIndex == 1) {
            return [1, max - 1]
          } else if (columnIndex > 1 && columnIndex < max) {
            return [0, 0]
          }
        }
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row);
      let changeType = (row && row.changeType) || ''
      if (['合计', '差额'].includes(changeType)) {
        let type = this.baseData[0].type
        let cd = this.baseData[5].columnData.filter((item) => {
          return item.morenState
        })
        let max = 0
        let propsList =
          changeType == '差额' ? ['allPriceShow', 'allPrice'] : ['allPriceShow', 'numberShow', 'allPrice', 'number']
        for (let index = 0; index < cd.length; index++) {
          const element = cd[index]
          if (propsList.includes(element.props)) {
            max = index
            break
          }
        }
        let length = this.baseData[5].tableData.length
        if (type == '采购换货单') {
          length = this.baseData[5].tableData1.length
        }
        if (rowIndex > length - 1) {
          if (columnIndex == 1) {
            return [1, max - 1]
          } else if (columnIndex > 1 && columnIndex < max) {
            return [0, 0]
          }
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.el-table th.gutter {
  display: table-cell !important;
}
.sum_item {
  font-weight: 600;
  background: transparent;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  border-bottom: #333333 solid 1px;
  // height: 20px;
}
.pre_view {
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  color: #000000;
}
.bottom_view {
  position: absolute;
  // bottom: 0;
  // width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.qr_item {
  display: flex;
  align-items: center;
}
.bill_head {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
  }
}
.bill_foot {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .right {
    display: flex;
    white-space: nowrap;
  }
}
.bill_body {
  width: 100%;
  overflow: hidden;
  overflow-x: clip;
  position: relative;
}
@media print {
  ::v-deep .el-table {
    box-sizing: border-box;
    height: 100%;

    th {
      padding: 0px;
      color: #666;
      box-sizing: border-box;
      bor
      .cell {
        display: flex;
        align-items: center;
        overflow: hidden;
        line-height: 16px;
        height: 100%;
        padding: 0;
      }
    }
    td {
      padding: 0;
      color: #666;
      box-sizing: border-box;

      .cell {
        display: flex;
        align-items: center;
        overflow: hidden;
        line-height: 16px;
        background: transparent;
        height: 100%;
        padding: 2px;
      }
    }
    th {
      .cell {
        background: #ededed;
        justify-content: center;
      }
    }

    .el-table__body-wrapper {
      tr{
        border: none !important;
      }
    }
    .el-table__body tr:hover > td {
      background: #e3f6ff;
    }
    .el-table__footer-wrapper {
      td {
        background: #f4f4f4;
        border: none;
      }
    }
    ::-webkit-scrollbar {
      display: none;
    }
  }
  .el-table::before {
    height: 0;
  }
  .el-table-print {
    border-left: 1px solid black  !important;
    border-right: none  !important;
    border-top: none  !important;
    border-bottom: none !important;
  }
}
.el-table-print {
  border-left: 1px solid black;
  }
::v-deep .el-table {
    box-sizing: border-box;
    height: 100%;

    th {
      padding: 0px;
      color: #666;
      box-sizing: border-box;
      .cell {
        display: flex;
        align-items: center;
        overflow: hidden;
        line-height: 16px;
        height: 100%;
        padding: 0;
      }
    }
    td {
      padding: 0;
      color: #666;
      box-sizing: border-box;

      .cell {
        display: flex;
        align-items: center;
        overflow: hidden;
        line-height: 16px;
        background: transparent;
        height: 100%;
        padding: 2px;
      }
    }
    th {
      .cell {
        background: #ededed;
        justify-content: center;
      }
    }
    .el-table__body tr:hover > td {
      background: #e3f6ff;
    }
    .el-table__footer-wrapper {
      td {
        background: #f4f4f4;
        border: none;
      }
    }
    ::-webkit-scrollbar {
      display: none;
    }
  }
  .el-table::before {
    height: 0;
  }
.bill_mask_view_script {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
}
.flex_center {
  display: flex;
  justify-content: center;
  width: 100%;
}
.flex_right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
</style>

